<template>
  <div class="detail">
    <detail-nav-bar ref="navBar" @navclick="navclick" />

    <scroll class="scroll" ref="scroll" @pagescroll="pageScroll">
      <detail-swiper :swiperImgs="swiperImgs" />

      <detail-base-info :goods="goods" />

      <detail-shop-info :shop="shopInfo" />

      <detail-goods-info :detailInfo="detailInfo" @imgLoad="imgLoad" />

      <detail-param-info :paramInfo="paramInfo" ref="param" />

      <detail-comment-info :commentInfo="commentInfo" ref="comment" />

      <goods :goods="commends" ref="recommend" />
    </scroll>

    <back-top @click.native="backTopClick" v-show="isBackTopShow" />

    <detail-bottom-bar @addToCart="addToCart" />
  </div>
</template>

<script>
  import DetailNavBar from './components/DetailNavBar.vue'
  import DetailSwiper from './components/DetailSwiper.vue'
  import DetailBaseInfo from './components/DetailBaseInfo.vue'
  import DetailShopInfo from './components/DetailShopInfo.vue'
  import DetailGoodsInfo from './components/DetailGoodsInfo.vue'
  import DetailParamInfo from './components/DetailParamInfo.vue'
  import DetailCommentInfo from './components/DetailCommentInfo.vue'
  import DetailBottomBar from './components/DetailBottomBar.vue'
  import Goods from '../../components/content/goods/Goods.vue'

  import Scroll from '../../components/common/scroll/Scroll.vue'

  import debounce from '@common/debounce'
  import { itemLoad, backTop } from '@common/mixins'
  import { getDetail, GoodsInfo, Shop, GoodsParam, getCommends } from '@network/detail'
  import { mapActions } from 'vuex'

  export default {
    name: 'detail',

    mixins: [itemLoad, backTop],

    components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      Scroll,
      DetailGoodsInfo,
      DetailParamInfo,
      DetailCommentInfo,
      Goods,
      DetailBottomBar
    },

    data() {
      return {
        goodsID: null,
        swiperImgs: [],
        goods: {},
        shopInfo: {},
        detailInfo: {},
        paramInfo: {},
        commentInfo: {},
        commends: [],
        themePostion: [],
        getThemePosition: null,
        currentIndex: 0
      }
    },

    created() {
      // 获取要展示的商品的ID
      this.goodsID = this.$route.query.goodsID

      // 请求详情页数据
      getDetail(this.goodsID).then(data => {
        let result = data.result
        this.swiperImgs = result.itemInfo.topImages
        this.goods = new GoodsInfo(result.itemInfo, result.columns, result.shopInfo.services)
        this.shopInfo = new Shop(result.shopInfo)
        this.detailInfo = result.detailInfo
        this.paramInfo = new GoodsParam(result.itemParams.info, result.itemParams.rule)
        if (result.rate.cRate !== 0) {
          this.commentInfo = result.rate.list[0]
        }
      })

      // 请求商品推荐数据
      getCommends().then(data => {
        this.commends = data.data.list
      })
    },

    mounted() {
      this.getThemePosition = debounce(() => {
        if (this.$refs.param) {
          this.themePostion = []
          this.themePostion.push(0)
          this.themePostion.push(this.$refs.param.$el.offsetTop)
          if (this.$refs.comment.$el.offsetTop) {
            this.themePostion.push(this.$refs.comment.$el.offsetTop)
          } else {
            this.themePostion.push(this.$refs.recommend.$el.offsetTop)
          }
          this.themePostion.push(this.$refs.recommend.$el.offsetTop)
          this.themePostion.push(Number.MAX_VALUE)
        }
      }, 1000)
    },

    destroyed() {
      this.$bus.$off('imgLoad', this.imgLoadListener)
    },

    methods: {
      ...mapActions({
        addCart: 'addToCart'
      }),

      imgLoad() {
        this.getThemePosition()
        this.refresh()
      },

      // 添加到购物车
      addToCart() {
        const goods = {
          image: this.swiperImgs[0],
          title: this.goods.title,
          description: this.goods.desc,
          price: this.goods.realPrice,
          id: this.goodsID
        }
        this.addCart(goods).then(result => {
          this.$toast.show(result)
        })
      },

      // 根据页面导航滚到到对应的主题
      navclick(index) {
        let themePostion = this.themePostion[index]
        if (this.themePostion[index] === undefined) {
          themePostion = this.themePostion[index + 1]
        }
        this.$refs.scroll.scrollTo(0, -themePostion, 300)
      },

      // 监听页面滚动
      pageScroll(position) {
        let y = -position.y
        let arr = this.themePostion

        this.showBackTop(position)

        for (let i = 0; i < arr.length - 1; i++) {
          if (this.currentIndex === i) {
            continue
          }
          if (y >= arr[i] && y < arr[i + 1]) {
            this.currentIndex = i
            this.$refs.navBar.currentIndex = i
            break
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .detail {
    position: relative;
    z-index: 99;
    height: 100vh;
    background-color: #fff;
  }
  .scroll {
    height: calc(100% - 1.375rem - 1.375rem);
  }
</style>
